<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation 
	<a class="m-link" href="https://material.angular.io/components/input/overview" target="_blank">demos & documentation</a>
</m-notice>

<div class="row">
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleBasicInputs">
			<div class="m-section">
				<span class="m-section__sub">
					matInput is a directive that allows native
					<mark>input</mark> and
					<mark>textarea</mark> elements to work with
					<code>mat-form-field</code>.
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="example-container">
					<form class="example-container">
						<mat-form-field class="example-full-width">
							<input matInput placeholder="Favorite food" value="Sushi">
						</mat-form-field>
						<div class="m-separator m-separator--dashed"></div>
						<mat-form-field class="example-full-width">
							<textarea matInput placeholder="Leave a comment"></textarea>
						</mat-form-field>
					</form>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleInputWithACustomErrorStateMatcher">
			<div class="m-section">
				<div class="example-container">
					<form class="example-container">
						<mat-form-field class="example-full-width">
							<input matInput placeholder="Email" [formControl]="emailFormControl" [errorStateMatcher]="matcher">
							<mat-hint>Errors appear instantly!</mat-hint>
							<mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
								Please enter a valid email address
							</mat-error>
							<mat-error *ngIf="emailFormControl.hasError('required')">
								Email is
								<strong>required</strong>
							</mat-error>
						</mat-form-field>
					</form>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleAutoResizingTextarea">
			<div class="m-section">
				<div class="example-container">
					<form class="example-container">
						<mat-form-field>
							<textarea matInput placeholder="Autosize textarea" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="5"></textarea>
						</mat-form-field>
					</form>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleInputWithAClearButton">
			<div class="m-section">
				<div class="example-container">
					<mat-form-field class="example-form-field">
						<input matInput type="text" placeholder="Clearable input" [(ngModel)]="value" />
						<button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
							<i class="la la-close"></i>
						</button>
					</mat-form-field>
				</div>
			</div>

		</m-material-preview>
	</div>
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleInputWithErrorMessages">
			<div class="m-section">
				<div class="example-container">
					<form class="example-container">
						<mat-form-field class="example-full-width">
							<input matInput placeholder="Email" [formControl]="emailFormControl2">
							<mat-error *ngIf="emailFormControl2.hasError('email') && !emailFormControl2.hasError('required')">
								Please enter a valid email address
							</mat-error>
							<mat-error *ngIf="emailFormControl2.hasError('required')">
								Email is
								<strong>required</strong>
							</mat-error>
						</mat-form-field>
					</form>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleInputsInAForm">
			<div class="m-section">
				<div class="example-container">
					<form class="example-container">
						<mat-form-field class="example-full-width">
							<input matInput placeholder="Company (disabled)" disabled value="Google">
						</mat-form-field>
						<div class="m-separator m-separator--dashed"></div>
						<table class="example-full-width" cellspacing="0">
							<tr>
								<td>
									<mat-form-field class="example-full-width">
										<input matInput placeholder="First name">
									</mat-form-field>
								</td>
								<td>
									<mat-form-field class="example-full-width">
										<input matInput placeholder="Long Last Name That Will Be Truncated">
									</mat-form-field>
								</td>
							</tr>
						</table>

						<div class="m-separator m-separator--dashed"></div>
						<mat-form-field class="example-full-width">
							<textarea matInput placeholder="Address">1600 Amphitheatre Pkwy</textarea>
						</mat-form-field>
						<mat-form-field class="example-full-width">
							<textarea matInput placeholder="Address 2"></textarea>
						</mat-form-field>
						<div class="m-separator m-separator--dashed"></div>
						<table class="example-full-width" cellspacing="0">
							<tr>
								<td>
									<mat-form-field class="example-full-width">
										<input matInput placeholder="City">
									</mat-form-field>
								</td>
								<td>
									<mat-form-field class="example-full-width">
										<input matInput placeholder="State">
									</mat-form-field>
								</td>
								<td>
									<mat-form-field class="example-full-width">
										<input matInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
										<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
									</mat-form-field>
								</td>
							</tr>
						</table>
					</form>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleInputWithHints">
			<div class="m-section">
				<div class="example-container">
					<form class="example-container">
						<mat-form-field class="example-full-width">
							<input matInput #message maxlength="256" placeholder="Message">
							<mat-hint align="start">
								<strong>Don't disclose personal info</strong>
							</mat-hint>
							<mat-hint align="end">{{message.value.length}} / 256</mat-hint>
						</mat-form-field>
					</form>
				</div>
			</div>

		</m-material-preview>


		<m-material-preview [viewItem]="exampleInputsWithPrefixesAndSuffixes">
			<div class="m-section">
				<div class="example-container">
					<form class="example-container">
						<mat-form-field class="example-full-width">
							<span matPrefix>+1 &nbsp;</span>
							<input type="tel" matInput placeholder="Telephone">
							<i class="la la-edit" matSuffix></i>
						</mat-form-field>
					</form>
				</div>
			</div>
		</m-material-preview>
	</div>
</div>
